<%@ page language="java" pageEncoding="UTF-8"%>
 <%@ include file="../include.jsp"%>
<style>

.nav-tabs {
    float: left;
    border-bottom: 0;
}
.nav-tabs li {
    float: none !important;
    margin: 0;
    !important
}
.nav-tabs li a {
    margin-right: 0 !important;
    border: 0 !important;
    background-color: #007ea8;
    border-radius: 0 !important;
}
li.active {
    border-right: 1px solid #F5F5F5 !important;
    background: #F5F5F5;
}
.nav-tabs li a:hover {
    background-color: #0DBFFA;
    border: 0 !important;
}
.nav-tabs .glyphicon {
    color: #fff;
}
.nav-tabs .active .glyphicon {
    color: #333;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: 0 !important;
}
.tab-content {
    margin-left: 45px;
}
.tab-content .tab-pane {
    display: none;
    background-color: #F5F5F5;
    padding: 1.6rem;
    overflow-y: auto;
    overflow-x: hidden;
}
.tab-content .active {
    display: block;
}

</style>
<ul class="nav nav-tabs">
	<c:if test="${!empty menusVOs }">
		<c:forEach items="${menusVOs }" var="menu">
			<shiro:hasPermission name="${menu.author }">
			<li <c:if test="${menu.id == menuType }"> class="active" </c:if> >
				<a href="#menu_${menu.id }" data-toggle="tab" id="menu_a_${menu.id }">
		    		<c:if test="${!empty menu.icon }">
						<span class="${menu.icon }" title="${menu.title }"></span>
					</c:if>
					<c:if test="${empty menu.icon }">
						<span class="glyphicon glyphicon-heart" title="${menu.title }"></span>
					</c:if>
		    	</a>
	    	</li>
	    	</shiro:hasPermission>
		</c:forEach>
	</c:if>
</ul>
<div class="tab-content ">
    <c:if test="${!empty menusVOs }">
	<c:forEach items="${menusVOs }" var="menu">
	<div id="menu_${menu.id }" style="padding: 0px" <c:if test="${menu.id == menuType }"> class="tab-pane active"</c:if><c:if test="${menu.id != menuType }">  class="tab-pane" </c:if>>
        <ul class="nav nav-pills nav-stacked">
			<c:if test="${!empty menu.children }">
			<c:forEach items="${menu.children }" var="child">
				<shiro:hasPermission name="${child.author }">
	            <li role="presentation" id="childMenu_${child.id }" <c:if test="${child.id == menuNextType }"> class="active"</c:if>>
	            	<a  href="${child.url }/${child.pid}/${child.id}">
	                	<c:if test="${!empty child.icon }"><span class="${child.icon }"></span></c:if>
	                	${child.title }
	            	</a>
	            </li>
			    </shiro:hasPermission>
			</c:forEach>
			</c:if>
	  </ul>
   	</div>
	</c:forEach>
	</c:if>
</div>

<script>
$(function(){
	var menuType = "${menuType}" ;
	if(menuType)
		$('#menu_'+menuType).click() ;
	
});
/* 
$(function(){
 	var menuType = "${menuType}" ;
 	if(menuType)
 		$('#menu_a_'+menuType).click() ;
 	
 });
*/
</script>